<?php echo $this->render('./includes/header.phtml');?>
<?php echo $this->render('./includes/fix_top_menu.phtml');?>
<?php
if(!isset($this->arrParam['f']) || ($this->arrParam['f'] != 'u' && $this->arrParam['f'] != 'l' && $this->arrParam['f'] != 't')) {
	$this->arrParam['f'] = 'u';
} 
?>
	<div id="container" class="row-fluid">
		<?php echo $this->render('./includes/menu.phtml');?>
		<script language="javascript" type="text/javascript">
		 //Interactive Chart
        function loadDashboard() {
            function randValue() {
                return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
            }
            <?php if($this->arrParam['f'] == 't') {?>
            var tours = [
		<?php 
        $iCountTourStatistic = 1;
        foreach ($this->arrTourStatistic as $tour) {?>
          [<?php echo $iCountTourStatistic;?>, <?php echo $tour == 0 ? "null" : $tour;?>]<?php echo $iCountTourStatistic < 12 ? "," : "";?>
        <?php $iCountTourStatistic++; }?>
            ];
            <?php }?>
            <?php if($this->arrParam['f'] == 'l') {?>
            var locations = [
		<?php 
        $iCountLocStatistic = 1;
        foreach ($this->arrLocStatistic as $loc) {?>
          [<?php echo $iCountLocStatistic;?>, <?php echo $loc == 0 ? "null" : $loc;?>]<?php echo $iCountLocStatistic < 12 ? "," : "";?>
        <?php $iCountLocStatistic++; }?>
        ];
            <?php }?>
            <?php if($this->arrParam['f'] == 'u') {?>
            var users = [
		<?php 
        $iCountUserStatistic = 1;
        foreach ($this->arrUserStatistic as $user) {?>
          [<?php echo $iCountUserStatistic;?>, <?php echo $user == 0 ? "null" : $user;?>]<?php echo $iCountUserStatistic < 12 ? "," : "";?>
        <?php $iCountUserStatistic++; }?>
                         ];
            <?php }?>

            var plot = $.plot($("#chartMod"), [
           <?php if($this->arrParam['f'] == 'u') {?>
           {
                data: users,
                label: "Thành viên "
            }
            <?php }?>
            <?php if($this->arrParam['f'] == 'l') {?>
            {
                data: locations,
                label: "Địa điểm "
            }
            <?php }?>
            <?php if($this->arrParam['f'] == 't') {?>
            {
                data: tours,
                label: "Nhóm "
            }
            <?php }?>
            ], {
                series: {
                    lines: {
                        show: true,
                        lineWidth: 2,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.05
                            }, {
                                opacity: 0.01
                            }]
                        }
                    },
                    points: {
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: "#eee",
                    borderWidth: 0
                },
                colors: [<?php if($this->arrParam['f'] == 'u') {?>"#385774"<?php }?> <?php if($this->arrParam['f'] == 'l') {?>"#913942" <?php }?> <?php if($this->arrParam['f'] == 't') {?>"#657D48" <?php }?> ],
                xaxis: {
                    ticks: 11,
                    tickDecimals: 0
                },
                yaxis: {
                    ticks: 11,
                    tickDecimals: 0
                }
            });


            function showTooltip(x, y, contents) {
                $('<div id="tooltip">' + contents + '</div>').css({
                    position: 'absolute',
                    display: 'none',
                    top: y + 5,
                    left: x + 15,
                    border: '1px solid #333',
                    padding: '4px',
                    color: '#fff',
                    'border-radius': '3px',
                    'background-color': '#333',
                    opacity: 0.80
                }).appendTo("body").fadeIn(200);
            }

            var previousPoint = null;
            $("#chartMod").bind("plothover", function (event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));

                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#tooltip").remove();
                        var x = item.datapoint[0],
                            y = item.datapoint[1];

                        showTooltip(item.pageX, item.pageY, "Có " + y + " " + item.series.label + " mới trong tháng " + x);
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        }
		</script>
		
		<div id="main-content">
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span12">
						<h3 class="page-title">
							Dashboard Page <small></small>
						</h3>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<div class="widget">
							<div class="widget-body">
								<div class="widget-body form">
								<?php echo $this->render('./includes/display_alert_message.phtml');?>
								<div class="row-fluid circle-state-overview">
						<div class="span2 responsive clearfix" data-tablet="span3"
							data-desktop="span2">
							<div class="circle-wrap">
								<div class="stats-circle turquoise-color">
									<i class="icon-user"></i>
								</div>
								<p>
									<strong><?php echo $this->total_user;?></strong> Thành viên 
								</p>
							</div>
						</div>
						<div class="span2 responsive" data-tablet="span3"
							data-desktop="span2">
							<div class="circle-wrap">
								<div class="stats-circle red-color">
									<i class=" icon-map-marker"></i>
								</div>
								<p>
									<strong><?php echo $this->total_loc;?></strong> Địa điểm 
								</p>
							</div>
						</div>
						<div class="span2 responsive" data-tablet="span3"
							data-desktop="span2">
							<div class="circle-wrap">
								<div class="stats-circle green-color">
									<i class="icon-plane"></i>
								</div>
								<p>
									<strong><?php echo $this->total_tour;?></strong> Nhóm
								</p>
							</div>
						</div>
						<div class="span2 responsive" data-tablet="span3"
							data-desktop="span2">
							<div class="circle-wrap">
								<div class="stats-circle gray-color">
									<i class="icon-comments-alt"></i>
								</div>
								<p>
									<strong><?php echo $this->total_cmt;?></strong> Bình luận 
								</p>
							</div>
						</div>
						
						<div class="span2 responsive" data-tablet="span3"
							data-desktop="span2">
							<div class="circle-wrap">
								<div class="stats-circle blue-color">
									<i class="icon-picture"></i>
								</div>
								<p>
									<strong><?php echo $this->total_photo;?></strong> Ảnh
								</p>
							</div>
						</div>
						<div class="span2 responsive" data-tablet="span3"
							data-desktop="span2">
							<div class="circle-wrap">
								<div class="stats-circle purple-color">
									<i class="icon-exclamation-sign"></i>
								</div>
								<p>
									<strong><?php echo $this->total_report;?></strong> Báo cáo sai phạm 
								</p>
							</div>
						</div>
					</div>
							</div>
								
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
						<div class="span12">
							<div class="widget">
								<div class="widget-title">
									<h4>
										<i class="icon-umbrella"></i> Thống kê Website
									</h4>
									<div class="pull-right span3" style="margin-top: 3px;">
										<select 
											onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
											
											<option value="<?php echo $this->baseUrl('/?f=u');?>" <?php echo $this->arrParam['f'] == 'u' ? 'selected="selected"' : '';?> >Thành viên</option>
											<option value="<?php echo $this->baseUrl('/?f=l');?>" <?php echo $this->arrParam['f'] == 'l' ? 'selected="selected"' : '';?>>Địa điểm </option>
											<option value="<?php echo $this->baseUrl('/?f=t');?>" <?php echo $this->arrParam['f'] == 't' ? 'selected="selected"' : '';?>>Nhóm </option>
										</select>
									</div>
								</div>
								<div class="widget-body">
									<div id="chartMod" class="chart"></div>
								</div>
							</div>
						</div>
					</div>
			</div>
		</div>
	</div>
<?php echo $this->render('./includes/footer.phtml');?>